Mikmak View UnitBase Inserting View

Probleem

In Mikmak UnitBase Editing wireframe omzetten naar HTML hebben we gezien hoe je de mockup omzet in een html. We voegen nu de C# code toe om de gegevens uit het model op de pagina te tonen. Die code nemen we over van de Editing view page.

We voegen vervolgens de use cases toe die de gebruiker hier kan uitvoeren.

Design

We hebben twee use case te implementeren:

1. de nieuwe gegevens inserten in de database:

   <a href="/UnitBase/Insert" class="tile">
       <span class="icon-disk"></span>
       <span class="screen-reader-text">Insert</span>
   </a>

2. annuleren

   <a href="/UnitBase/Cancel" class="tile">
       <span class="icon-close"></span>
       <span class="screen-reader-text">Annuleren</span>
   </a>

3. Het fieldset, labels en input elementen zijn reeds toegevoegd.

Oplossing

Kopieer de volgende code in een bestand met de naam Views/UnitBase/Inserting.cshtml:

@model IEnumerable<Webwinkel.Models.UnitBase>
@{
    Layout = "~/Views/Shared/MasterLayout.cshtml";
}

<div class="floor" id="flat-entity-floor">
    <div class="control-panel">
        <a href="/Home/Index" class="tile">
            <span class="icon-menu2"></span>
            <span class="screen-reader-text">Home</span>
        </a>
        <h1>MikMak</h1>
    </div>
    <form class="showroom" action="/UnitBase/Insert" method="post">
        <header>
            <h2>Insert nieuwe basiseenheid</h2>
            <div id="command-panel" class="command-panel">
                <a href="/UnitBase/Insert" class="tile">
                    <span class="icon-disk"></span>
                    <span class="screen-reader-text">Insert</span>
                </a>
                <a href="/UnitBase/Cancel" class="tile">
                    <span class="icon-close"></span>
                    <span class="screen-reader-text">Annuleren</span>
                </a>
            </div>
        </header>
        <div class="list">
            <!-- kijk eerst na als er objecten in het model staan -->
            @if (Model.Any())
            {
                <table>
                    @foreach (var item in Model)
                {
                        <tr>
                            <td>
                                <a href="/UnitBase/ReadingOne" class="tile">
                                    <span class="icon-arrow-right"></span>
                                    <span class="screen-reader-text">Select</span>
                                </a>
                            </td>
                            <td>
                                @item.Code
                            </td>
                            <td>
                                @item.Name
                            </td>
                        </tr>
                    }
                </table>
            }
            else
            {
                <p>Geen basiseenheden ingevoerd in de UnitBase entiteit.</p>
            }
        </div>
        <div class="detail">
            <fieldset>
                <div>
                    <label for="UnitBase-Code">Code</label>
                    <input id="UnitBase-Code" name="UnitBase-Code" class="text"
                           style="width: 22.5%;" type="text" value="" required />
                </div>
                <div>
                    <label for="UnitBase-Name">Nom</label>
                    <input id="UnitBase-Name" name="UnitBase-Name" class="text"
                           style="width: 32.5%;" type="text" value="" required />
                </div>
            </fieldset>
            <div class="feedback">
            </div>
        </div>
    </form>
</div>

Resultaat

1. Als we naar de Inserting pagina navigeren zien we dit resultaat. Alle elementen staan erop. We kunnen de gegevens intikken maar we missen natuurlijk nog de CSS opmaak.

   

2. Voor de opmaak van de div's van de klasse detail en list voeg je in app.css de volgende css toe. Je kan het bijgewerkte app.css bestand hier downloaden.

   /* --------------- patroon verdiep tabel zonder foreign keys ------------------- */
   #flat-entity-floor .showroom {
       background-color: rgb(248,223,203);
       border-bottom: 4px solid #fff;
       height: 100%;
   }
   
   /* header */
   #flat-entity-floor .showroom header {
       width: 70%;
       height: 7%;
       background: rgb(207,90,80);
       float: left;
       /* geen right border, de knop heeft die al border-right: 4px solid #fff; */
       border-bottom: 4px solid #fff;
   }
   
   /* voor alle detail views */
   .detail {
       overflow-y: auto;
   }
   
   /* detail side */
   #flat-entity-floor .showroom > .detail {
       width: 70%;
       height: 93%;
       background: rgba(255,248,231, 0.9);
       float: left;
   }
   
   /* list side */
   #flat-entity-floor .showroom > .list {
       width: 30%;
       height: 100%;
       background: rgba(255,248,231, 0.9);
       overflow-y: auto;
       float: right;
       border-left: 4px solid #fff;
   }
   
   /* list nav */
   #flat-entity-floor .showroom > .list nav {
       padding: 0 0 0 0.4em;
   }
   
   /* feedback */
   #flat-entity-floor .showroom > .feedback {
       width: 70%;
       height: 7.5%;
       background: rgb(42,99,118);
       float: left;
   }
   
   

3. Tenslotte maken we nog de form elementen op met css. Je vind het form.css bestand hier.

   /* --------- form -----------------*/
   form input[type=text] {
       padding: 0.2em;
       border: 0.1em solid rgb(161, 156, 161);
       border-image: none;
       font-size: 1.6em;
       width: 100%;
   }
   
   form input:focus {
       outline: none;
   }
   
   form input[type=checkbox], input[type=radio] {
       /* All browsers except webkit*/
       transform: scale(2);
       /* Webkit browsers*/
       -webkit-transform: scale(2);
       margin: 0 1.8em 0 0.8em;
       padding: 0.3em;
   }
   
   form label {
       font-size: 1.4em;
       color: #554e55;
   }
   
   form select {
       padding: 0.2em;
       border: 0.1em solid rgb(161, 156, 161);
       font-size: 1.6em;
   }
   
   form textarea {
       height: 5em;
       width: 60%;
   }
   
   form a {
       padding: 0.2em 0 0.2em 0;
       height: 3em;
   }
   
   form table a {
       color: #6083A3; /*februrary low*/
       text-align: center;
       border: 0;
       font-size: 3.2vh;
       max-width: 1.8em;
       height: 1.8em;
       float:  right;
       overflow: visible;
       padding-left: 0.2em;
       margin: 0;
       border-color: none;
   }
   
   form a:hover {
       color: rgb(226,69,16);
       cursor: pointer;
   }
   
   form a span {
       padding-right: 0.3em;
   }
   
   form table {
       border: 0.1em solid #242424;
       border-collapse: collapse;
       width: 100%;
   }
   
   form td:first-child {
       width: 4em;
   }
   
   form td {
       padding-right: 1em;
   }
   
   form table tr:nth-child(even) td,
   form table tr:nth-child(even) td a {
       background-color: #95C9DA;
   }
   
   form table tr:nth-child(odd) td,
   form table tr:nth-child(odd) td a {
       background: #B4D8E4;
   }
   
   form fieldset {
       border: 2px solid #FF7D82;
       margin-bottom: 2%;
       padding: 2%;
       width: 100%;
   }
   
   form fieldset div {
       margin: 0.5em 0 0 0;
       width: 90%;
   }
   
   form fieldset div .text {
       width: 70%;
   }
   
   form fieldset div .integer {
       width: 6em;
   }
   
   form .search {
       width: 100%;
       height: 6%;
       background-color: #95C9DA;
   }
   
   form .search input {
       font-size: 1.5em;
       line-height: 1.8em;
       border: none;
       width: 70%;
       background-color: #95C9DA;
   }
   

4. Voeg een link naar form.css toe in MasterLayout.cshtml:

   <link type="text/css" rel="stylesheet" href="~/Content/Css/form.css">

5. En dit is het resultaat: